<template>
  <a-modal
    class="product-selling-info"
    :visible="visible"
    okText="提交"
    cancelText="关闭"
    :title="title"
    :destroyOnClose="true"
    :maskClosable="false"
    :keyboard="false"
    width="800px"
    @cancel="closeModal()"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
  >
    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
      <a-form-item label="卖点类型">
        <a-select
          allowClear
          :options="typeOptions"
          placeholder="请选择卖点类型"
          v-decorator="[
            'pointType',
            { rules: [{ required: true, message: '请选择卖点类型' }] },
          ]"
        />
      </a-form-item>
      <a-form-item label="卖点名称">
        <a-input
          :maxLength="35"
          v-decorator="[
            'pointName',
            { rules: [{ required: true, message: '请填写卖点名称' }] },
          ]"
          placeholder="请填写卖点名称"
        />
      </a-form-item>
      <a-form-item label="卖点视频">
        <UploadImage
          :fileSizeLimit="52428800"
          :isVideo="true"
          accept=".mp4"
          v-decorator="[
            'videoAddr',
          ]"
        />
        卖点视频介绍上传需小于50M
      </a-form-item>
      <!-- <a-form-item label="视频封面图" help="可点击下面按钮获取视频封面(图片全黑请重新获取)，或者上传自定义的视频封面。">
        <a-button :loading="getCoverLoading" type="primary" @click="getCoverByVideo">获取视频封面</a-button>
        <UploadImage
          v-decorator="[
            'videoCoverAddr',
          ]"
        />
      </a-form-item> -->
      <a-form-item label="视频封面图">
        <UploadImage
          v-decorator="[
            'videoCoverAddr',
          ]"
        />
      </a-form-item>
      <a-form-item label="视频位置">
        <a-radio-group
          :options="positionOptions"
          v-decorator="[
            'videoLocation',
            {initialValue: 1}
          ]"
        />
      </a-form-item>
      <a-form-item label="卖点图片">
        <UploadImage
          :limit="99"
          :fileSizeLimit="1048576"
          v-decorator="[
            'imageAddrs',
            { rules: [{ required: true, message: '请上传卖点图片' }] },
          ]"
        />
        <p class="form-tips">支持上传1M以内图片</p>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
// <script>
// import {getVideoCover, blobToFile, dataURLtoBlob} from '@/utils'
import UploadImage from "./UploadImage"
export default {
  name: "ProductSelling-info",
  components:{
    UploadImage
  },
  props: {
    record: {
      type: Object,
      default() {
        return {};
      },
    },
    visible: {
      type: Boolean,
      default: false,
    },
    typeOptions: {
      type: Array,
      required: true,
    },
  },
  computed: {
    title() {
      return this.record.id ? "修改卖点" : "添加卖点";
    },
  },
  data() {
    return {
      positionOptions: [
        {label: '顶部', value: 1},
        {label: '底部', value: 2},
      ],
      form: this.$form.createForm(this, { name: "coordinated" }),
      confirmLoading: false,
      // getCoverLoading:false
    };
  },
  watch: {
    visible(value) {
      this.confirmLoading = false
      // this.getCoverLoading = false
      if (value) {
        if (this.record.id) {
          this.getInfo();
        }
      }
    },
  },
  mounted() {},
  methods: {
    // getCoverByVideo () {
    //   const that = this
    //   const videoAddr = this.form.getFieldValue('videoAddr')
    //   if (!videoAddr) return this.$message.warning('请先上传卖点视频！')
    //   that.getCoverLoading = true
    //   getVideoCover(videoAddr).then(dataURL => {
    //     that.getCoverLoading = false
    //     this.$confirm({
    //       title: '封面图预览',
    //       content: <img src={dataURL} style="max-width: 500px;max-height: 500px;" />,
    //       cancelText: '取消',
    //       width: 'fit-content',
    //       centered: true,
    //       okText: '确认使用',
    //       onOk: ()=> {
    //         return new Promise((resolve, reject)=> {
    //           const file = blobToFile(dataURLtoBlob(dataURL), 'videocover.jpeg')
    //           that.$upload(null, file).then(res => {
    //             if (res && res.returnCode === 1000) {
    //               that.form.setFieldsValue({
    //                 videoCoverAddr: res.dataInfo.url
    //               })
    //               resolve()
    //             } else {
    //               reject()
    //             }
    //           }).catch(err=> {
    //             reject()
    //           })
    //         })
    //       }
    //     })
    //   }).catch(err=> {
    //     that.getCoverLoading = false
    //   })
    // },
    getInfo() {
      this.$get("/sellpoint/id", { id: this.record.id }).then((res) => {
        if (res && res.returnCode === 1000) {
          const record = res.dataInfo;
          this.$nextTick(() => {
            const formItems = this.form.getFieldsValue();
            Object.keys(formItems).forEach((key) => {
              formItems[key] = record[key];
            });
            this.form.setFieldsValue(formItems);
          });
        }
      });
    },
    
    handleSubmit() {
      this.confirmLoading = true;
      this.form.validateFields((err, values) => {
        if (!err) {
          let url = "/sellpoint/add";
          if (this.record.id) {
            url = "/sellpoint/update";
          }
          this.$post(url, { ...values, id: this.record.id })
            .then((res) => {
              this.confirmLoading = false;
              if (res && res.returnCode === 1000) {
                this.$message.success("保存成功！");
                this.closeModal(true);
              }
            })
            .catch((err) => {
              this.confirmLoading = false;
            });
        } else {
          this.confirmLoading = false;
        }
      });
    },

    closeModal(freshTable) {
      this.form.resetFields();
      this.$emit("cancel", freshTable);
    },
  },
};
</script>